body{
    background-color: #979797;
}

/* 固定宽度的容器 */
.container{
    width: 90%;
   max-width: 980px;/* 80px*12 + 20px = 980px */
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 800px;
    padding-right: 2.083333333333333333333333%;
}

/* 定义行 */
.row{
    clear: both;
}

/* 定义列 */
.col{
    float: left;
    margin-left: 2.0833333333333333333333333%;    /* 栅格系统中的“槽（gutter）” */
    width: 6.25%;
    background-color: lightcoral;
}

.col.span2{
    width: calc((6.25%)*2 + 2.0833333333333333333333333%*1);
}

.col.span3{
    width: calc((6.25%)*3 + 2.0833333333333333333333333%*2);
}

.col.span4{
    width: calc((6.25%)*4 + 2.0833333333333333333333333%*3);
}

.col.span5{
    width: calc((6.25%)*5 + 2.0833333333333333333333333%*4);
}

.col.span6{
    width: calc((6.25%)*6 + 2.0833333333333333333333333%*5);
}

.col.span7{
    width: calc((6.25%)*7 + 2.0833333333333333333333333%*6);
}

.col.span8{
    width: calc((6.25%)*8 + 2.0833333333333333333333333%*7);
}

.col.span9{
    width: calc((6.25%)*9 + 2.0833333333333333333333333%*8);
}

.col.span10{
    width: calc((6.25%)*10 + 2.0833333333333333333333333%*9);
}

.col.span11{
    width: calc((6.25%)*11 + 2.0833333333333333333333333%*10);
}

.col.span12{
    width: calc((6.25%)*12 + 2.0833333333333333333333333%*11);
}